// // 此处是详情页面的js
// 获取url中数据,判断url是否符合规则
// console.log(location.search.match(/id=\d+/));
function fn() {
    let urlParams = location.search.match(/id=(\d+)$/);
    // 判断url参数是否符合规则
    if (!urlParams) {
        // 弹出一个提示层，两秒然后跳转到列表页面
        let index = layer.msg('非法请求', {
            icon: 2,
            time: 0
        });
        setTimeout(function() {
            layer.close(index);
            location.href = './html/list.html'
        }, 2000);
    } else {
        // 参数符合规则，获取景点的id
        var id = urlParams[1];
        // var index = layer.load(1, {
        //     shade: [0.5, '#ccc'] //0.1透明度的白色背景
        // });
        // 根据id发起ajax请求
        // 使用async/await配合jq的ajax请求,并渲染页面的数据， 
        // alert(id)
        async function getInfo() {
            let res = await pAjax({
                url: '../server/detail.php',
                dataType: 'json',
                data: {
                    id
                }
            });

            // 接收到景点信息
            let data = res.data;
            let imgs = data.imgpath.split('==========')
                // 在页面中显示渲染数据
            $('.enlarge .middle>img').attr('src', imgs[0]);
            $('.enlarge .middle .big img').attr('src', imgs[0]);
            for (let i = 0; i < imgs.length; i++) {
                $('.enlarge .small ul').append($(`<li><img src="${imgs[i]}"></li>`))

            }
            // 调用放大镜
            enlarge()
                // 显示的信息替换
            $('.description>h3').text(data.h3); // 渲染标题
            let span = data.span.split('========')
                // 在页面中显示渲染数据
            for (let i = 0; i < span.length; i++) {
                // $('.title span').text(span[i])
                $('.title').append($(`<span>${span[i]}</span>`))
            }
            let font = data.font.split('========')
                // 在页面中显示渲染数据
            $('.description .font').append($(`<span>${font[0]}</span>`))
            for (let j = 1; j < font.length; j++) {
                if (j == font.length - 1) {
                    $('.description .font').append($(`<span>${font[j]}</span>`))
                    break;
                }
                $('.description .font').append($(`<p>${font[j]}</p>`))
            }
            $('.description .price').append($(`<span>￥${data.price}<s>${data.s}</s></span>`)); // 渲染价格
            // 将景点商品的库存放到标签属性上
            $('.addCart .number').attr('stock', data.stock);
            // layer.close(index)
        }
        getInfo()

        // 实现点击加 和 减
        $('.addCart .number .add').click(function() {
                // 获取库存
                let stock = $('.addCart .number').attr('stock');
                // 获取输入框中的值
                let num = $(this).prev().val() - 0;
                num++;
                // console.log(stock);
                if (num >= stock) {
                    num = stock;
                    // 禁用按钮
                    $(this).prop('disabled', true);
                }
                $(this).prev().prev().prop('disabled', false); // 将禁用的-号按钮解禁
                $(this).prev().val(num);
            })
            // 实现点击减
        $('.addCart .number .reduce').click(function() {
            // 获取输入框中的值
            let num = $(this).next().val() - 0;
            num--;
            if (num <= 1) {
                num = 1;
                // 禁用按钮
                $(this).prop('disabled', true);
            }
            $(this).next().next().prop('disabled', false); // 将禁用的+号按钮解禁
            $(this).next().val(num);
        })

        // 点击加入购物车
        $('.addCart .addBtn').click(function() {
            // 判断是否登录，如果没有登录则跳转到登录页面
            let username = getCookie('username');
            if (!username) {
                // 没有登录
                let index = layer.msg('请先登录');
                setTimeout(function() {
                    layer.close(index);
                    location.href = './login.html'
                }, 1000)
                return false;
            }
            // 准备加入购物的数量
            let num = $('.addCart>.number>#num').val() - 0;
            // console.log(num);
            // 用户已经登录加入购物车
            // 获取本地购物车中的数据，判断是否有
            let data = localStorage.getItem('data');
            if (data) {
                // 本地购物车中数据
                // 判断购物车中是否有当前要添加的景点的id,
                // 判断id与用户名
                data = JSON.parse(data);
                // console.log(data);
                let arr = data.filter(item => {
                    return username === item.username && id === item.id;
                })
                if (arr.length) {
                    // 之前的购物车中有这个景点的数据,只需要在之前的数量上累加
                    //  console.log((arr[0].num-0) + num);
                    data.forEach(item => {
                        if (username === item.username && id === item.id) {
                            item.num = (arr[0].num - 0) + num
                        }
                    })
                } else {
                    // console.log(arr);
                    // 之前的购物车中没有这个景点的数据，将当前数据追加
                    data.push({ username, id, num })
                }
                localStorage.setItem('data', JSON.stringify(data))
            } else {
                // 本地购物车localStorage中没有数据
                // 则将这个的购物车数据添加  [{username,id,num}]  // 用户名，商品id，选购的数量
                localStorage.setItem('data', JSON.stringify([{ username, id, num }]));
            }
            layer.msg('加入购物车成功', {
                icon: 1,
                time: 1000
            })

            function getNum() {
                var data = localStorage.getItem('data');

                var trr = JSON.parse(data);
                var trr = trr.map(v => {
                    if (v.username === username) {
                        return v.num
                    }
                });
                // alert(trr)
                // console.log(trr);
                var alll = 0;
                for (var i = 0; i < trr.length; i++) {
                    alll += parseInt(trr[i])
                }
                // alert($('.login .qwe').text())
                //获取购物车的数量
                $('.login .qwe').text("(" + alll + ")")
            }
            getNum();
        })
    }
    // 判断用户是否登录--判断cookie中会否存在username的值
    $(function() {
        // 获取cookie的username，如果cookie中的username有值，则表示用户已经登录，否则未登录
        var username = getCookie('username');
        var login = document.querySelector('.login');
        if (username) {
            // 用户已经登录，在顶部导航栏，显示用户的信息，及显示退出按钮
            var str = `
        <li><a href="">欢太商城APP</a></li>
        <li><a href="javascript:;"><i class="iconfont icon-yonghu"></i><span>${username}</span>
            </a></li>
            <li><a href="javascript:;" class="logout">退出</a></li>
        <li><a href="../html/cart.html"><i class="iconfont icon-gouwuchekong"></i><span>购物车</span><span class="qwe">(0)</span></a></li>
        `;
            login.innerHTML = str;
            // 退出功能,点击退出
            var logout = document.querySelector('.logout');
            logout.onclick = function() {
                // 使用layer的confirm弹出层，展示 确定 和 取消 的选项
                layer.confirm('你确定要退出吗？', { btn: ['确定', '取消'] },
                    // 第一个 确定 按钮点击触发的函数
                    function() {
                        // 删除cookie，退出登录状态
                        delCookie('username');
                        login.innerHTML = ` <li><a href="">欢太商城APP</a></li>
                    <li><a href="./login.html"><i class="iconfont icon-yonghu"></i><span>登录</span>
                        </a></li>
                    <li><a href="./register.html">注册</a></li>
                    <li><a href="../html/cart.html"><i class="iconfont icon-gouwuchekong"></i><span>购物车</span><span>(0)</span></a></li>`;
                        layer.msg('退出成功', { icon: 1, time: 500 })
                    },
                    // 第二个 取消 按钮 点击触发的函数
                    function() {
                        layer.msg('已取消', { icon: 1, time: 500 })
                        return false;
                    }
                )
            }
        }

        function getNum() {
            var data = localStorage.getItem('data');

            var trr = JSON.parse(data);
            var trr = trr.map(v => {
                if (v.username === username) {
                    return v.num
                }
            });
            // alert(trr)
            // console.log(trr);
            var alll = 0;
            for (var i = 0; i < trr.length; i++) {
                alll += parseInt(trr[i])
            }
            // alert($('.login .qwe').text())
            //获取购物车的数量
            $('.login .qwe').text("(" + alll + ")")
        }
        getNum();
    })
}
fn()